<template>
    <el-button type="success" @click="daochuToExcel">导出</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column  prop="uname" label="姓名" width="100" />
    <el-table-column v-for="(mouth,index) in 12" :key="index" :label="`${index+1}月`" width="100" >
        <template v-slot="scope">
            <el-button @click="getming(scope.row.uid,index+1)" link v-if="scope.row.moths[index]>0" style="color: red; text-decoration: underline;">{{ scope.row.moths[index]}}</el-button>
            <span v-else>{{  scope.row.moths[index] }}</span>
        </template>
    </el-table-column>
  </el-table>
   <el-dialog
    v-model="dialogVisible"
    title="请假明细"
    width="900"
  >
     <el-table :data="mingdata" style="width: 100%">
    <el-table-column  prop="uid" label="编号" width="100" />
    <el-table-column prop="userName" label="姓名" width="100" />
    <el-table-column prop="mouth" label="月份" width="90" />
    <el-table-column prop="approvalStartTime" label="请假开始时间" width="170" >
        <template v-slot="scope">
            <span >{{ moment(scope.row.approvalStartTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
    </el-table-column>
    <el-table-column prop="approvalEndTime" label="请假结束时间" width="170" >
         <template v-slot="scope">
            <span >{{ moment(scope.row.approvalEndTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
    </el-table-column>
    <el-table-column prop="countHours" label="总时长" width="120" />
    <el-table-column prop="reason" label="请假原因" width="120" />
  </el-table>
  </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios';
import moment, { months } from 'moment';
import { onMounted, ref } from 'vue';
import * as XLSX from 'xlsx';
import read from '../../http/AxiosHelper';
import write from '../../http/AxiosHelper1';
onMounted(()=>{
    getBao();
})
const handleClick = () => {
  console.log('click')
}
//默认年份
const year=ref(new Date().getFullYear());
//查询报表信息
const tableData = ref([{
    uid:0,
    uname:"",
    moths:[]
}]);
const getBao=()=>{
    read.get("/api/BaoBiao/GetZongBaoBiao",{params:{Year:year.value}}).then(res=>{
        tableData.value=res.data.data;
    })
}
//详情弹出框
const dialogVisible=ref(false);
const mingdata=ref([{
     "uid": 0,
      "userName": "",
      "mouth": 0,
      "approvalStartTime": "",
      "approvalEndTime": "",
      "countHours": 0,
      "reason": ""
}])
const getming=(uid:number,mouth:number)=>{
    dialogVisible.value=true
    read.get("/api/BaoBiao/GetMingBao",{params:{
        Uid:uid,
        Mouth:mouth
    }}).then(res=>{
        mingdata.value=res.data.data;
    })
}
//导出
const daochuToExcel=()=>{
    const exportData:any[][]=[];
    const headers=['姓名/请假月份','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    exportData.push(headers);
    tableData.value.forEach(row=>{
        const newRow:any[]=[row.uname];
        for(let i=0;i<12;i++){
            newRow.push(row.moths[i]||0);
        }
        exportData.push(newRow);
    });
    const workbookherad=XLSX.utils.aoa_to_sheet(exportData);
    const workbook=XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook,workbookherad,"请假工时汇总");
    const fileName=`请假工时汇总_${new Date().toLocaleDateString()}.xlsx`;
    XLSX.writeFile(workbook,fileName);
}   


</script>
